<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

<%@ include file="../header.jsp" %>

	<link href="${pageContext.request.contextPath}/css/datepicker.css" rel="stylesheet"/>
    
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap-datepicker.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/locales/bootstrap-datepicker.es.js"></script>
    <script>
        $(document).ready(function() {
            $("#botonBuscar").on('click', function(e) {
                e.preventDefault()
                // $('#customerDescription').remove();
                this.form.submit();
            });
            $('#dateFrom').datepicker({
                format: 'dd/mm/yyyy',
                language: 'es'
            });
            $('#dateTo').datepicker({
                format: 'dd/mm/yyyy',
                language: 'es'
            });
            
            <c:if test="${dateFrom != null}"> 
            $('#dateFrom').datepicker('setDate', new Date(${dateFrom.year}, 
                                                          ${dateFrom.month},
                                                          ${dateFrom.day}));
            </c:if>
            <c:if test="${dateTo != null}">
            $('#dateTo').datepicker('setDate', new Date(${dateTo.year}, 
                    									${dateTo.month},
                    									${dateTo.day}));
            </c:if>

        });
        
        function clearCustomer() {

			$('#customerId').val('')
			$('#customerDescription').val('')
			$('#customer').html('')

            return false
        }

        function cambiarPagina(pageOffset) {
            pageOffset = pageOffset >= 0 ? pageOffset : 0;
            $("#offset").val(pageOffset)
            $("#botonBuscar").click();
            return false
        }

    </script>

        <div class="container">
        <div class="main-panel">
        <div class="panel panel-default">
        <div class="panel-heading"><h2>Cantidad de documentos digitalizados</h2></div>
        <div class="panel-body">

        <form method="GET">
            <div class="form-group">
                <label for="customer">Asociado</label>
                <input type="hidden" id="customerId" name="customerId" value="${param.customerId}" />
                <input type="hidden" id="customerDescription" name="customerDescription" value="${param.customerDescription}" />
                <div class="row">
                <div class="col-xs-9">
                    <div class="input-group">
                        <c:if test="${param.customerDescription != null}">
                            <div class="form-control" id="customer">${param.customerDescription}</div>
                        </c:if>      
                        <c:if test="${param.customerDescription == null}">
                            <div class="form-control" id="customer"><span style="color:#aaa">Asociado</span></div>
                        </c:if>                      
                        <span class="input-group-btn">
                            <a href="#" onclick="return clearCustomer()" class="btn btn-default" title="Borrar"><span class="glyphicon glyphicon-remove"></span></a>
                        </span>
                    </div>
                </div>
                <div class="col-xs-3">
                    <a data-toggle="modal" href="${pageContext.request.contextPath}/jsp/buscarCliente/index.jsp" data-target="#buscarClienteModal" class="btn btn-default">Buscar Asociado</a>
                </div>
                </div>
            </div>

            <div class="form-group">
                <label for="cajaId">Caja</label>
                <input id="cajaId" type="text" class="form-control" name="cajaId" placeholder="Caja" value="${param.cajaId}" />
            </div>
            
            <div class="form-group">
                <div class="row">
                    <div class="col-xs-3">
                    <label for="dateFrom">Fecha desde</label>
                    <input type="text" class="form-control" id="dateFrom" name="dateFrom" style="max-width: 12em;">
                    </div>
                    <div class="col-xs-3">
                    <label for="dateTo">Fecha hasta</label>
                    <input type="text" class="form-control" id="dateTo" name="dateTo" style="max-width: 12em;">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label>Agrupar por</label>
                <div class="row" id="reportType">
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType1" value="byCustomer" 
                     <c:if test="${reportType == 'byCustomer' || reportType == null}">checked</c:if> />
                  Asociado
                  </label>
                  </div>
                  </div>
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType2" value="byBox"
                     <c:if test="${reportType == 'byBox'}">checked</c:if> />
                    Caja AdeA 
                  </label>
                  </div>
                  </div>
                  <div class="col-xs-2">
                  <div class="checkbox">
                  <label>
                    <input type="radio" name="reportType" id="reportType3" value="byDate"
                     <c:if test="${reportType == 'byDate'}">checked</c:if> />
                    Fecha de proceso
                  </label>
                  </div>
                  </div>
                </div>
            </div>

            <div class="form-group">
            	<input type="button" id="botonBuscar" value="Buscar" class="btn btn-primary" />
            </div>

            <c:if test="${items != null && pager != null && pager.totalItems > 0}">

            <c:if test="${reportType == 'byCustomer'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>Asociado</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${items}" varStatus="i" var="row">
                    <tr>
                        <td><c:out value="${row.customer.idPersona}" /> <c:out value="${row.customer.name}" /> CUIT: <c:out value="${row.customer.cuit}" />)</td>
                        <td><c:out value="${row.amount}" /></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            </c:if>

            <c:if test="${reportType == 'byBox'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>Caja</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${items}" varStatus="i" var="row">
                    <tr>
                        <td><c:out value="${row.box.cajaId}" /></td>
                        <td><c:out value="${row.amount}" /></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            </c:if>

            <c:if test="${reportType == 'byDate'}">
            <table class="table table-striped">
            <thead>
                    <tr>
                        <th>Día</th>
                        <th>Cantidad</th>
                    </tr>
                </thead>
                <tbody>
                <c:forEach items="${items}" varStatus="i" var="row">
                    <tr>
                       <td><fmt:formatDate value="${row.createdDate}" pattern="dd/MM/yyyy"/></td>
                       <td><c:out value="${row.amount}" /></td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            </c:if>

            <input type="hidden" id="offset" name="offset" value="${offset}" />
            
            <jsp:include page="../pagination.jsp" >
    			<jsp:param name="pager" value="${pager}" />
    			<jsp:param name="changeOffsetFunction" value="cambiarPagina" />
			</jsp:include>

			</c:if>
            <c:if test="${pager != null && pager.totalItems == 0}">
                <div class="alert alert-warning">
                No se encontraron resultados
                </div>
            </c:if>
            
        </form>

        </div>
        </div>
        </div>
        </div>

    <div class="modal fade" id="buscarClienteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>

 <%@ include file="../footer.jsp" %>
        